// import React, { useState, useEffect, useRef } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTimes } from '@fortawesome/free-solid-svg-icons'
import './TabList.scss'
const TabList = ({files, activedId, unsavedIds, onTabClick, onCloseTab}) => {
    return (
        <ul className="nav nav-pills tablist-component">
            {
                files.map(file => {
                    const withUnsavedMask = unsavedIds.includes(file.id)
                    const fClassName = classNames({
                        'nav-link': true,
                        'br-0': true,
                        'withUnsaved': withUnsavedMask,
                        'active': file.id === activedId,
                        'd-flex': true,
                        'align-items-center': true
                    })
                    return (
                        <li className="nav-item d-flex" key={file.id}>                            
                            <span href="#" className={fClassName} onClick={(e) => {e.preventDefault(); onTabClick(file.id)}}>
                                <span className="no-shrink">{file.title}</span>
                                <span className="col-1 px-0 ml-2 close-icon"
                                    onClick={(e) => {e.stopPropagation(); onCloseTab(file.id)}}
                                >
                                    <FontAwesomeIcon icon={faTimes}></FontAwesomeIcon>
                                </span>
                                { 
                                    withUnsavedMask 
                                    && 
                                    <span className="rounded-circle unsaved-icon ml-2"></span>
                                }
                            </span>
                        </li>
                    )
                })
            }
        </ul>
    )
}
TabList.propTypes = {
    files: PropTypes.array,
    activedId: PropTypes.string,
    unsavedIds: PropTypes.array,
    onTabClick: PropTypes.func,
    onCloseTab: PropTypes.func
}
TabList.defaultProps = {
    unsavedIds: []
}
export default TabList